
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Here is a website which describes the Fractal.</title>
    <!-- web fonts -->

    <!-- //web fonts -->
    <!-- Template CSS -->
    <link rel="stylesheet" href="css/style-starter.css">
  </head>
  <body>

<section class="w3l-bootstrap-header">
  <nav class="navbar navbar-expand-lg navbar-light py-lg-3 py-2">
    <div class="container">
      <a class="navbar-brand" href="http://lou-zhiyuan.gitee.io/dom121">Back To Homepage</a>
      <!-- if logo is image enable this   
    <a class="navbar-brand" href="#index.html">
        <img src="image-path" alt="Your logo" title="Your logo" style="height:35px;" />
    </a> -->
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon fa fa-bars"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="index.html">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="Web/Mandelbrot.html">Mandelbrot Set</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="Web/Butterfly.html">Butterfly Effect</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="Web/Logistic.html">Logistic Map</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="Web/Memes.html">Memes</a>
          </li>
        </ul>
        
      </div>
    </div>
  </nav>
</section>
 <!--  Main banner section -->
 <section class="w3l-main-banner" id="home">
  <div class="companies20-content">
    <div class="companies-wrapper">
        <div class="item">
         
            <div class="slider-info banner-view text-center">
              <div class="banner-info container">
                <img src="images/c1.jpg" alt="about image" class="img-fluid">
                <h3 class="banner-text mt-5">Hello, I’m Li Mengyang.</h3>
                  <p class="my-4 mb-5">I want to show you something interesting.</p><br>
               
              </div>
            </div>
          
        </div>
    </div>
  </div>
</section>
 <!--  //Main banner section -->
<section class="w3l-about ">
<div class="skills-bars py-5">
 <div class="container py-md-3">
  <div class="heading text-center mx-auto">
    <h3 class="head">Some Fundamental Concept</h3>
    <p class="my-3 head">What are Fractals?</p>
    <p align="center">A fractal is a never-ending pattern. Fractals are infinitely complex patterns that are self-similar across different scales. They are created by repeating a simple process over and over in an ongoing feedback loop. Driven by recursion, fractals are images of dynamic systems – the pictures of Chaos. <p>
   
      
   
</div>

 </div>
 </div>
</div>
 </section>
<section class="w3l-feature-3" id="features">
	<div class="grid top-bottom">
		<div class="container">
			<div class="heading text-center mx-auto">
                <h3 class="head text-white">Fractals are Everywhere.</h3>
                <p class="my-3 head text-white">For instance, coastline is the most common fractal. But not just the shorelines, almost every boundary you can come into contact with has a fractal structure.Of course, there are many artificial fractals.</p>
              </div>
			<div class="middle-section grid-column text-center mt-5 pt-3">
				<div class="three-grids-columns">
					
					<h4>Koch Snowflake</h4>
					<p>The Koch snowflake is a fractal curve and one of the earliest fractals to have been described. It is based on the Koch curve, which appeared in a 1904 paper titled "On a Continuous Curve Without Tangents, Constructible from Elementary Geometry" by the Swedish mathematician Helge von Koch.
</p>
					
				</div>
				<div class="three-grids-columns">
					
					<h4>Sierpinski triangle</h4>
					<p>The Sierpiński triangle, also called the Sierpiński gasket or Sierpiński sieve, is a fractal attractive fixed set with the overall shape of an equilateral triangle, subdivided recursively into smaller equilateral triangles. Originally constructed as a curve, this is one of the basic examples of self-similar sets—that is, it is a mathematically generated pattern that is reproducible at any magnification or reduction. </p>
					
				</div>
				<div class="three-grids-columns">
					
					<h4>Hilbert Curve</h4>
					<p>The Hilbert curve is a continuous fractal space-filling curve first described by the German mathematician David Hilbert in 1891, as a variant of the space-filling Peano curves discovered by Giuseppe Peano in 1890. </p>
					
				</div>
			</div>
		</div>
	</div>
</section>
<div class="products-4" id="portfolio">
    <!-- Products4 block -->
    <div id="products4-block" class="text-center">
        <div class="container">
            <div class="heading text-center mx-auto mb-5">
                <h3 class="head">Well, let's take a look.</h3>
                <p class="my-3 head">There are some common fractals.</p>
              </div>
            <input id="tab1" type="radio" name="tabs" checked>
            

            <input id="tab2" type="radio" name="tabs">
            
            <input id="tab3" type="radio" name="tabs">
            

            <input id="tab4" type="radio" name="tabs">
            

            <section id="content1" class="tab-content text-left">
                <div class="d-grid grid-col-3">
                    <div class="product">
                        <a href="images/g1.jpg" data-lightbox="example-set"
                           >
                            <figure>
                                <img src="images/g1.jpg" class="img-responsive" alt="" />
                            </figure>
                        </a>
                        
                    </div>
                    <div class="product">
                        <a href="images/g2.jpg" data-lightbox="example-set"
                            >
                            <figure>
                                <img src="images/g2.jpg" class="img-responsive" alt="" />
                            </figure>
                        </a>
                        
                    </div>
                    <div class="product">
                        <a href="images/g3.jpg" data-lightbox="example-set"
                            >
                            <figure>
                                <img src="images/g3.jpg" class="img-responsive" alt="" />
                            </figure>
                        </a>
                        
                    </div>
                    <div class="product">
                        <a href="images/g4.jpg" data-lightbox="example-set"
                            >
                            <figure>
                                <img src="images/g4.jpg" class="img-responsive" alt="" />
                            </figure>
                        </a>
                        
                    </div>
                    <div class="product">
                        <a href="images/g5.jpg" data-lightbox="example-set"
                            >
                            <figure>
                                <img src="images/g5.jpg" class="img-responsive" alt="" />
                            </figure>
                        </a>
                       
                    </div>
                    <div class="product">
                        <a href="images/g6.jpg" data-lightbox="example-set"
                            >
                            <figure>
                                <img src="images/g6.jpg" class="img-responsive" alt="" />
                            </figure>
                        </a>
                        
                    </div>
                    
                    
                </div>
            </section>

            <section id="content2" class="tab-content text-left">
                <div class="d-grid grid-col-3">
                    <div class="product">
                        <a href="images/g7.jpg" data-lightbox="example-set"
                            >
                            <figure>
                                <img src="images/g7.jpg" class="img-responsive" alt="" />
                            </figure>
                        </a>
                        
                    </div>
                    <div class="product">
                        <a href="images/g8.jpg" data-lightbox="example-set"
                            >
                            <figure>
                                <img src="images/g8.jpg" class="img-responsive" alt="" />
                            </figure>
                        </a>
                       
                    </div>
                    <div class="product">
                        <a href="images/g1.jpg" data-lightbox="example-set"
                            >
                            <figure>
                                <img src="images/g1.jpg" class="img-responsive" alt="" />
                            </figure>
                        </a>
                       
                    </div>
                    <div class="product">
                        <a href="images/g2.jpg" data-lightbox="example-set"
                            >
                            <figure>
                                <img src="images/g2.jpg" class="img-responsive" alt="" />
                            </figure>
                        </a>
                       
                    </div>
                    <div class="product">
                        <a href="images/g3.jpg" data-lightbox="example-set"
                            >
                            <figure>
                                <img src="images/g3.jpg" class="img-responsive" alt="" />
                            </figure>
                        </a>
                        
                    </div>
                    <div class="product">
                        <a href="images/g4.jpg" data-lightbox="example-set"
                            >
                            <figure>
                                <img src="images/g4.jpg" class="img-responsive" alt="" />
                            </figure>
                        </a>
                        
                    </div>
                </div>
            </section>
        </div>
    </div>
    <!-- Products4 block -->
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/lightbox-plus-jquery.min.js"></script>
<section class="services-12" id="experience">
	<div class="form-12-content">
		<div class="container">
			<div class="grid grid-column-2 ">
				
				<div class="column1">
          <h3 class="mb-5">History</h3>
		  <div class="experience-top">
            <h5>17th</h5>
			<h4>Beginning</h4>
			<p class="my-3 text-white">Starting from notions of recursion.</p>
            </div>
            <div class="experience-top">
              <h5>19th</h5>
              <h4>Development</h4>
              <p class="my-3 text-white">It has moved through increasingly rigorous mathematical treatment of the concept to the study of continuous but not differentiable functions in the 19th century.</p>
              </div>
              <div class="experience-top">
                <h5>20th</h5>
                <h4>The Coining of The Word Fractal</h4>
                <p class="my-3 text-white">There is an increasingly subsequent burgeoning of interest in fractals and computer-based modelling in the 20th century.</p>
                </div>
			</div>
		</div>
	</div>
</section>
<section class="w3l-testimonials" id="testimonials">
  <div class="customers-6-content py-5">
    <div class="container py-lg-3">
      
    </div>
  </div>
  <!--//customers -->
 <h4 align="center">Here is a website which describes the Fractal.</h4>
 <!-- grids block 5 -->
   <!-- move top -->
  <button onclick="topFunction()" id="movetop" title="Go to top">
              <span class="fa fa-angle-up"></span>
                 </button>
                 <script>
                     // When the user scrolls down 20px from the top of the document, show the button
                     window.onscroll = function () {
                         scrollFunction()
                     };
              
                     function scrollFunction() {
                         if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                             document.getElementById("movetop").style.display = "block";
                         } else {
                             document.getElementById("movetop").style.display = "none";
                         }
                     }
              
                     // When the user clicks on the button, scroll to the top of the document
                     function topFunction() {
                         document.body.scrollTop = 0;
                         document.documentElement.scrollTop = 0;
                     }
                 </script>
                 <!-- /move top -->
</section>
<!-- // grids block 5 -->
<script src="js/jquery-3.3.1.min.js"></script>
<!-- //footer-28 block -->
</section>

<script>
    $(function () {
      $('.navbar-toggler').click(function () {
        $('body').toggleClass('noscroll');
      })
    });
  </script>
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  

<!-- Smooth scrolling -->



</body>

</html>
<!-- // grids block 5 -->
